<template lang="html">
  <div class="login">
      <img src="../../assets/icon/bt.png" class="icon" alt="">
      <img src="../../assets/icon/zxkt.png" class="icons" alt="">
      <div class="input_box">
      	<input v-model='zh' type="text" placeholder="输入手机号">
      	<input v-model='mm' type="password" placeholder="输入密码" >
      	<span @click='clickss'>登 录</span>
      	<div>
      		<i class="register">新用户注册</i>
      		<i class="password">忘记密码？</i>
      	</div>
      </div>
  </div>
</template>

<script>
  import qs from 'qs'
export default {
	data(){
		return{
			  zh:"",
        mm:""
		  }     
	  },
   methods:{
    clickss(){
      // console.log(this.zh)
      // console.log(this.mm)
      this.$axios.post(this.HOSTS+"login",qs.stringify({
        username:this.zh,
        password:this.mm
      }))
      .then(data=>{
          console.log(data.data)
          if(data.data.msg==="error"){
            alert("用户名密码错误")
            return
          }else{
            console.log("登录成功")
            localStorage.setItem('username',data.data[0].username)
            this.$router.push({ path: '/' })
          }
      })
      .catch(error=>{console.log(error)})
    }
  },
}
</script>

<style lang="less" scoped>
   .login{
   	  width: 100%;
   	  height:667px;
      background-color: rgba(12,203,240);
      border:1px solid rgba(12,203,240);
      .icon{
      	width:80px;
      	height: 100px;
      	display: block;
      	margin:0 auto;
      	margin-top:60px;  
      }
      .icons{
      	width: 200px;
      	height: 70px;
      	margin-top:20px; 
      }
      .input_box{
      	width: 100%;
      	 margin-top:50px; 
      	input{
      		width:250px;
      		height:40px;
      		border:1.5px solid rgba(255,255,255); 
      		border-radius:20px;
      		color:rgba(255,255,255);
      		margin-top:20px; 
      	}
        span{
        	width:250px;
        	display: block;
            margin: 0 auto;	
            line-height: 40px;
            margin-top:20px; 
            background-color: rgba(12,185,232);
            border:1px solid rgba(12,185,232);
            border-radius:20px;
            color:rgba(255,255,255);
        }
      }
      div{
      	width: 240px;
      	margin:0 auto; 
      	margin-top:20px;
      	overflow: hidden; 
      	.register{
      		float: left;
      		color:rgba(255,255,255);
      	}
      	.password{
      		float: right;
      		color:rgba(255,255,255);
      	}
      }
   }
</style>
